<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name=”viewport” content=”width=device-width, initial-scale=1″>
    <title>Title</title>
    <style>
        .dev {
            dbackground: transparent;
            background: rgba(93, 54, 65, 0.3);
            border-radius: 100px 10px;
            position: fixed;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 1;
            width: 60%;
            height: 50%;
            display: none;
        }

        .dev input {
            font-size: 20px
        }

        .dev1 {
            float: left;
            position: fixed;
            width: 20%;

        }
    </style>
</head>
<body>
<div class="dev1">

</div>
<div>
    <div style="background-color: #6f75b0;width: auto; ">
        <div align="center" style="padding-top:10px;padding-bottom: 10px">
            <span style="font-size: 30px;color: #fefefe;">测试</span>
        </div>
    </div>
    <div>
        <div style="float:right">
            <button onclick="show()">添加文章</button>
        </div>
        <div class="dev">
            <div align="center">
                <div style="margin-bottom: 30px;margin-top: 10px">
                    <input type="text" name="title" id="title" value="" placeholder="请输入标题">
                </div>
                <div>
                    <textarea name="article" id="article" rows="18" cols="40" placeholder="请输入文章"></textarea>
                </div>
                <button onclick="add()">添加</button>
            </div>
        </div>
        <ul>
            <?php
        foreach($data as $val)
        {
        ?>
            <Li><?php echo $val['title']; ?>
                <button onclick="del(<?php echo $val['id']; ?>);">删除</button>
            </Li>
            <?php
        }
         ?>
        </ul>
    </div>

</div>
<div class="dev1">

</div>
</body>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
    function del(id) {
        var obj = {
            id: id
        }
        var url = 'del';
        ajax(obj, url);
    }

    function add() {
        var url = 'add'
        var obj = {
            title: $('#title').val(),
        }
        ajax(obj, url);
    }

    function show() {
        if ($('.dev').css('display') == 'none') {
            $('.dev').css('display', 'block');
        } else {
            $('.dev').css('display', 'none');
        }

    }

    function ajax(obj, url) {
        var url = url;
        var obj = obj;
        $.ajax({
            url: url,
            datatype: 'JSON',
            type: 'post',
            data: obj,
            success: function (res) {
                res = JSON.parse(res);
                if (res.state == 0) {
                    alert(res.msg);
                    window.location.reload();
                } else {
                    alert(res.msg);
                }
            }
        });
    }

</script>
</html>